<template>
  <div class="app-container">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      size="default"
      label-width="100px"
    >
      <el-col :span="18" :offset="4">
        <el-form-item label="隐私条款" prop="title">
          <!-- <editor v-model="formData.title" type="textarea"  :min-height="266">
            </editor> -->
          <!-- <editor
            class="WangEditor"
            @select="getRich"
            ref="childrenRef"
            :editValue="formData.title"
          /> -->
          <editor v-model="formData.title" />
        </el-form-item>
      </el-col>
    </el-form>
    <div class="text-center">
      <el-button @click="resetForm">清空文本</el-button>
      <el-button type="primary" @click="submitForm" :disabled="loading"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script setup>
import {
  addPrivacy,
  getPrivacy,
  updatePrivacy,
} from "@/api/system/privacy";

const { proxy } = getCurrentInstance();
const formRef = ref();
const loading = ref(false);
const data = reactive({
  formData: {
    title: "",
    id: undefined,
  },
  rules: {
    title: [
      {
        required: true,
        message: "请输入隐私条款",
        trigger: "blur",
      },
    ],
  },
});
const { formData, rules } = toRefs(data);

function getContent() {
  getPrivacy().then((res) => {
    formData.value = res.data;
  });
}
function submitForm() {
  formRef.value.validate((valid) => {
    if (!valid) return;
    loading.vaue = true;
    updatePrivacy(formData.value).then((res) => {
      loading.value = false;
      proxy.$message.success("保存成功");
      proxy.$emit("update:visible", false);
    });
  });
}

function resetForm() {
  formRef.value.resetFields();
}
//当编辑器的内容更新时，获取该值
const getRich = function (value) {
  formData.value.title = value;
};
getContent();
</script>
<style>
</style>
